<!DOCTYPE html>
<html lang="en">
<head>
    <script src="@{'/public/js/jquery-1.9.1.min.js'}"></script>

    <meta charset="utf-8">
    <!--title>Dashboard - SMS Admin Bootstrap</title -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="sms">

    <!-- javascript
    ================================================== -->
    <script type="text/javascript" src="@{'/public/js/widgets.js'}"></script>

    <script src="@{'/public/js/helpers.js'}" type="text/javascript"></script>

*{<script src="@{'/public/js/jquery-ui.min.js'}"></script>}*
    <script src="@{'/public/js/bootstrap.js'}"></script>
    <script src="@{'/public/js/uniform/jquery.uniform.js'}"></script>
    <script src="@{'/public/js/peity/jquery.peity.js'}"></script>

    <script src="@{'/public/js/select2/select2.js'}"></script>
    <script src="@{'/public/js/knob/jquery.knob.js'}"></script>
    <script src="@{'/public/js/flot/jquery.flot.js'}"></script>
    <script src="@{'/public/js/flot/jquery.flot.resize.js'}"></script>
    <script src="@{'/public/js/flot/jquery.flot.categories.js'}"></script>
    <script src="@{'/public/js/wysihtml5/wysihtml5-0.3.0.js'}"></script>
    <script src="@{'/public/js/wysihtml5/bootstrap-wysihtml5.js'}"></script>
    <script src="@{'/public/js/calendar/fullcalendar.js'}"></script>
    <!-- this plugin required jquery ui-->

    <!-- required sms template js, for full feature-->
    <script src="@{'/public/js/holder.js'}"></script>
    <script src="@{'/public/js/sms-base.js'}"></script>

    <script src="@{'/public/js/jquery-ui.min.js'}"></script>
    <script src="@{'public/js/html5.js'}"></script>

    <script>
        function changeLang(language) {
            $.post("/changelang/", { lang: language },
                    function (data) {
                        location.reload();
                    }
            );
        }
    </script>

    <!-- google font -->
    <link href="@{'/public/css/googlefont.css'}" rel="stylesheet" type="text/css"/>

    <!-- styles -->
    <link href="@{'/public/css/bootstrap.css'}" rel="stylesheet">
    <link href="@{'/public/css/bootstrap-responsive.css'}" rel="stylesheet">
    <link href="@{'/public/css/sms.css'}" rel="stylesheet">
    <link href="@{'/public/css/sms-responsive.css'}" rel="stylesheet">
    <link href="@{'/public/css/sms-helper.css'}" rel="stylesheet">
    <link href="@{'/public/css/sms-icon.css'}" rel="stylesheet">
    <link href="@{'/public/css/font-awesome.css'}" rel="stylesheet">
    <link href="@{'/public/css/animate.css'}" rel="stylesheet">
    <link href="@{'/public/css/uniform.default.css'}" rel="stylesheet">

    <link href="@{'/public/css/select2.css'}" rel="stylesheet">
    <link href="@{'/public/css/fullcalendar.css'}" rel="stylesheet">
    <link href="@{'/public/css/bootstrap-wysihtml5.css'}" rel="stylesheet">

    <link href="@{'/public/css/jquery-ui.css'}" rel="stylesheet"/>
    <script>
        $(function() {
            $("#infoBtn").on("click", function() {
                $.get("/getInfo",
                {},
                function(data, t2, t3){
                    $("#nameUser").text(data.name);
                    $("#userPicture").attr("title", data.name);
                    $("#userPicture").attr("alt", data.name);
                    $("#mainUser").text(data.name);
                    $("#mailUser").text(data.email);
                    $("#birthDateUser").text(data.birthDate);
                    $("#countryUser").text(data.country);
                    $("#languageUser").text(data.language);
                    $("#infoBtn").off("click");
                },
                "json"
                );
            })
        });
    </script>

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>

    <![endif]-->
</head>

<body>
<!-- section header -->
<header class="header">
    <!--nav bar helper-->
    <div class="navbar-helper">
        <div class="row-fluid">
            <!--panel site-name-->
            <div class="span2">
                <div class="panel-sitename">
                    <h2><a href="/"><span class="color-teal">SMS</span>&alpha;</a></h2>
                </div>
            </div>
            <!--/panel name-->

            <div class="span6">
                <!--panel search-->
                <div class="panel-search">
                    <form class="form-search">
                        <div class="input-icon-append">
                            <button type="submit" rel="tooltip-bottom" title="&{'Template_search'}" class="icon"><i
                                    class="icofont-search"></i></button>
                            <input class="input-large search-query grd-white" maxlength="23"
                                   placeholder="&{'Template_search_placeholder'}" type="text">
                        </div>
                    </form>
                </div>
                <!--/panel search-->
            </div>
            <div class="span4">

                <!--panel button ext-->
                <div class="panel-ext">
                    <div class="btn-group">
                        <!--notification-->
                        <a class="btn btn-danger btn-small" data-toggle="dropdown" href="#" title="3 &{'Template_notification'}">3</a>
                        <ul class="dropdown-menu dropdown-notification">
                            <li class="dropdown-header grd-white"><a href="#">&{'Template_view_all_notifications'}</a></li>
                            <li class="new">
                                <a href="#">
                                    <div class="notification">John Doe &{'Template_notification_commented_post'}</div>
                                    <div class="media">
                                        <img class="media-object pull-left" data-src="/public/js/holder.js/64x64"/>

                                        <div class="media-body">
                                            <h4 class="media-heading">Lorem ipsum
                                                <small class="helper-font-small"> john doe</small>
                                            </h4>
                                            <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="new">
                                <a href="#">
                                    <div class="notification">&{'Template_notification_request_new_order'}</div>
                                    <div class="media">
                                        <img class="media-object pull-left" data-src="/public/js/holder.js/64x64"/>

                                        <div class="media-body">
                                            <h4 class="media-heading">Tortor dapibus</h4>

                                            <p>Vegan fanny pack odio cillum wes anderson 8-bit.</p>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <!-- <li class="dropdown-footer"><a href=""></a></li> -->
                        </ul>
                        <!--notification-->
                    </div>

                    <div class="btn-group user-group">
                        <a id="infoBtn" class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <img id="userPicture" class="corner-all" align="middle" src="/public/img/user-thumb.jpg" title="${name}"
                                 alt="profile"/> <!--this for display on PC device-->
                            <button class="btn btn-small btn-inverse" id="mainName"></button>
                            <!--this for display on tablet and phone device-->
                        </a>
                        <ul class="dropdown-menu dropdown-user" role="menu" aria-labelledby="dLabel">
                            <li>
                                <div class="media">
                                    <a class="pull-left" href="#">
                                        <img class="img-circle" src="/public/img/user.jpg" title="&{'Template_profile'}"
                                             alt="profile"/>
                                    </a>

                                    <div class="media-body description">
                                        <p><strong id="nameUser"></strong></p>

                                        <p class="muted" id="mailUser"></p>
                                        <p class="muted" id="birthDateUser"></p>
                                        <p class="muted" id="countryUser"></p>
                                        <p class="muted" id="languageUser"></p>

                                        <p class="action"><a class="link" href="#">&{'Template_activity'}</a> -
                                            <a class="link" href="#">&{'Template_settings'}</a>
                                        </p>
                                        <a href="/editProfile"
                                           class="btn btn-primary btn-small btn-block">&{'Template_view_profile'}</a>
                                    </div>
                                </div>
                            </li>
                            <li class="dropdown-footer">
                                <div>

                                    <!--<a class="btn btn-small" href="#">&{'Template_add_account'}</a>-->
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn btn-small pull-right" href="@{Application.logout()}">&{'Template_logout'}</a>
                    </div>
                    <div class="btn-group" style="float: right; padding-right: 30px; padding-top: 10px;">
                        <a href="#" onclick="changeLang('ru')"><img src="@{'/public/img/ru.png'}"/></a>
                        <a href="#" onclick="changeLang('en')"><img src="@{'/public/img/gb.png'}"/></a>
                    </div>
                </div>
                <!--panel button ext-->
            </div>
        </div>
    </div>
    <!--/nav bar helper-->
</header>

<!-- section content -->
<section class="section">
    <div class="row-fluid">
        <!-- span side-left -->
        <div class="span1">
            <!--side bar-->
            <aside class="side-left">
                <ul class="sidebar">

                    <li>
                        <a href="@{calendar.CalendarController.calendar()}" title="&{'Template_menu_calendar'}">
                            <!--<div class="badge badge-important">3</div>-->
                            <div class="helper-font-24">
                                <i class="icofont-edit"></i>
                            </div>
                            <span class="sidebar-text">&{'Template_menu_calendar'}</span>
                        </a>

                    </li>
                    <li>
                        <a href="charts.html" title="&{'Template_menu_charts'}">
                            <div class="helper-font-24">
                                <i class="icofont-bar-chart"></i>
                            </div>
                            <span class="sidebar-text">&{'Template_menu_charts'}</span>
                        </a>
                    </li>
                    <li id="taskboard">
                        <a href="@{taskboard.TaskBoardController.index()}" title="&{'Template_menu_taskboard'}">
                            <div class="helper-font-24">
                                <i class="icofont-table"></i>
                            </div>
                            <span class="sidebar-text">&{'Template_menu_taskboard'}</span>
                        </a>
                    </li>
                    <li id="chat">
                        <a href="@{chat.ChatController.index()}" title="&{'Template_menu_chat'}">
                            <div class="helper-font-24">
                                <i class="icofont-columns"></i>
                            </div>
                            <span class="sidebar-text">&{'Template_menu_chat'}</span>
                        </a>
                    </li>
                    <li id="wiki">
                        <a href="@{wiki.WikiController.index()}" title="&{'Template_menu_wiki'}">
                            <div class="helper-font-24">
                                <i class="icofont-star"></i>
                            </div>
                            <span class="sidebar-text">&{'Template_menu_wiki'}</span>
                        </a>
                    </li>
                    <li>
                        <a href="@{UserList.list()}" title="&{'Template_menu_user_list'}">
                            <div class="helper-font-24">
                                <i class="icofont-reorder"></i>
                            </div>
                            <span class="sidebar-text">&{'Template_menu_user_list'}</span>
                        </a>
                    </li>

                </ul>
            </aside>
            <!--/side bar -->
        </div>
        <!-- span side-left -->

        <!-- span content -->
        <div class="span9" id="main-div">
            <!-- content -->
        #{doLayout /}
            <!-- /content -->
        </div>
        <div id="chat-menu" class="span2">
            #{chat channel:channel/}
        </div>
        <!-- /span content -->

    </div>
</section>

<!-- section footer -->
<footer>
    <a rel="to-top" href="#top"><i class="icofont-circle-arrow-up"></i></a>
</footer>

</body>
</html>
